<template>
  <div id="app">
    <header v-if="isHeader">
      <header-nav></header-nav>
    </header>
    <main>
      <router-view></router-view>
    </main>
    <footer v-if="isHeader">
      <bottom-menu></bottom-menu>
    </footer>
  </div>
</template>

<script>
import headerNav from '@/components/HeaderNav.vue'
import bottomMenu from '@/components/BottomMenu.vue'
// import boxView from "@/components/BoxView.vue";
export default {
  components: {
    headerNav,
    bottomMenu
    // boxView,
  },
  data () {
    return {
      isHeader: true // 头部导航栏
    }
  },
  watch: {
    $route (to, from) {
      if (to.path === '/user/login' || to.path === '/user/register' || to.path === '/user/forget') {
        this.isHeader = false
      } else {
        this.isHeader = true
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
